<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--0:引入 vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!--界面-->
    <div id="app">
        <todo></todo>
    </div>
        
    <script>
        //2222222222定义组件todoAdd
        var todoAdd={
            template:`<div> 
                <input type="text"  v-model="item"> <button @click="add">+</button>
            </div>`,
            data(){
                return {
                    item:"",
                }
            },
            methods:{
                add(){                    
                    this.myadd(this.item);
                }                
            },
            props:["myadd"],
        }

        //44444444定义组件todoItem
        var todoItem={
            template:`
            <li>{{myi+1}}-{{mytask}} <button @click="del">X</button> </li>
            `,
            props:["mytask","myi","mydel0"],
            methods:{
               del(){
                this.mydel0(this.myi) ;
               }
            }
        }

        //3333333333定义组件todoList
        var todoList={
            template:`<div>
            <ul v-for="(task,i) of mytasks" :key="i" >
                <todo-item  :mytask="task" :myi="i"  :mydel0="mydel"></todo-item>                
            </ul></div>`,
            components:{
                'todo-item':todoItem,
            }, 
            props:["mytasks","mydel"],
        }

        //11111111定义组件todo，并注册,这种注册时全局注册
        Vue.component("todo", {   
            template: `<div>
            <h1>待办事项列表</h1>
            <todo-add  :myadd="add_item"></todo-add>
            <todo-list :mytasks="tasks" :mydel="del_item"></todo-list>
            </div>`,
            //注册组件，时局部注册
            components:{
                'todo-add':todoAdd,   'todo-list':todoList   ,            
            },

            data(){
                return {
                    tasks:["吃饭","睡觉","学习","打游戏"],
                }
            },
            methods:{
                add_item(str){
                    this.tasks.push(str);
                },

                del_item(i){
                    this.tasks.splice(i,1);
                }
            }
        });

      var vm = new Vue({
        //界面
        el: "#app",
        //数据
        data: {},
        //方法
        methods: {},
      });
    </script>
  </body>
</html>
